<template>
  <div>
    <van-nav-bar title="新朋友" left-text="返回" left-arrow @click-left="onClickLeft"/>
    <div style="background: #ffffff;padding: 20px">
      <div style="line-height: 26px;margin-bottom: 12px;margin-left: 5px">好友通知（待处理）</div>
      <div v-for="pro in processedList" :key="pro.id">
        <div style="display: flex">
          <van-image round width="60" height="60" :src="pro.headImg"/>
          <div style="padding-top: 10px;margin-left: 10px;flex: 1">
            <div style="">{{pro.nickName}}</div>
            <div style="margin-top: 6px;color: #b7b7b7">{{pro.msg}}</div>
          </div>
          <div style="line-height: 45px"><van-button type="success" size="small" @click="agreeFun(pro.id,pro.sendId)">同意</van-button></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/api/system.js'

export default {
  data() {
    return {
      // 对方加我为好友待处理的
      processedList: [],
    }
  },
  created() {
    this.getSend()
  },
  methods: {
    // 对方加我为好友待处理的
    async getSend() {
      const data = await api.getSendApi(0)
      this.processedList = data
    },
    async agreeFun(id,username) {
      // 1.先调用后端标记同意
      const data = await api.agreeApi(id)
      // 2.调用环信，双方成为好友
      this.WebIm.conn.acceptContactInvite(username)
      await this.getSend()
    },
    onClickLeft() {
      history.back();
    }
  },
  component: {}
}
</script>

<style scoped>

</style>
